<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8">
<div class="span3">
          <h6 class="demo-panel-title">摄像头</h6>
          <!-- <label class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
                                  <span> 前置摄像头</span>
               <div class="col-xs-2"></div>                   
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" checked="checked">
                                  <span> 后置摄像头               </span>          
          </label> -->
          <select id="videoSource"></select>
            <br>
		   <button id="st">start</button>
		  	<button id="re">record</button>
		 
          <div>
				<video id="video" width="280" autoplay   muted></video>
		  </div>
		 
		 
		  <script language="javascript" type="text/javascript">
		var videoSelect = document.querySelector('select#videoSource');
		var recordBt = document.getElementById("re");
		var stBt = document.getElementById("st");
		var video = document.getElementById("video");
		var recordRTC;
		//获得设备摄像头信息并添加到下拉框
		var prC;
		var ops;
		var lostream;

		function gotSources(sourceInfos) {
			
			var pp = 1;
			for (var i = 0; i !== sourceInfos.length; ++i) {
				var sourceInfo = sourceInfos[i];
				if (sourceInfo.kind === 'video') {
					var option = document.createElement('option');
					option.value = sourceInfo.id;
					prC = sourceInfo.id;
					if(pp == 1)
						option.text = "前置摄像头";
					else
						option.text = "后置摄像头";
					pp++;
					videoSelect.appendChild(option);
				 }
			 }
		}
		
		if (typeof MediaStreamTrack === 'undefined'){
			alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
			} 
		else {
			MediaStreamTrack.getSources(gotSources);
			}
		
		
		//设置navigator
		navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia 
						|| navigator.mozGetUserMedia;
		
		var cavWidth,cavHeight;//设置输出视频的宽高
		
	
		
		function start(){
			var videoSource = videoSelect.value;
			var videoConstraints = {
		            audio: false,
		            video: {
		                optional: [{sourceId: videoSource}]
		            }
		        };
			
			
			navigator.getUserMedia(videoConstraints, function (mediaStream) {
					 video.onloadeddata = function() {
						 console.log("Video w:" + video.videoWidth + " h:" + video.videoHeight);
							cavWidth = video.videoWidth / 2;
							cavHeight = video.videoHeight / 2;
							
						var options = {
							    type: 'video',
							    video: video,
							    canvas: { width: cavWidth, height: cavHeight}
						};
						recordRTC = window.RecordRTC(mediaStream, options); 
						
					}; 
					video.src = URL.createObjectURL(mediaStream);
	//				recordRTC = window.RecordRTC(mediaStream, ops); 
					lostream = mediaStream;
/* 					setTimeout(function(){
						stopR();
					}, 17000); */
				},function(){}); 
			
			
		}
		
		function record(){
			recordRTC.startRecording();
			setTimeout(function(){
				stopR();
			}, 17000); 
			
		}
		
		
		function stopR(){
			recordRTC.stopRecording(function(url) {
		 		/* video.src = null;
		        window.stream.stop(); */
			 });
		}
		
		recordBt.onclick =  record;
		stBt.onclick = start;
		
		var xmlHttpRequest;  
		function createXmlHttpRequest(){    
		    if(window.ActiveXObject){ //如果是IE浏览器    
		        return new ActiveXObject("Microsoft.XMLHTTP");    
		    }else if(window.XMLHttpRequest){ //非IE浏览器    
		        return new XMLHttpRequest();    
		    }    
		}    
		function sendFile(file){    
			
			var ii = getCookie("guid");
		    var url = "videoStream.servlet?guid="+ ii;       
		            
		    //1.创建XMLHttpRequest组建    
		    xmlHttpRequest = createXmlHttpRequest();    
		        
		    //2.设置回调函数    
		    xmlHttpRequest.onreadystatechange = zswFun;

		    //3.初始化XMLHttpRequest组建    
		    xmlHttpRequest.open("POST",url,true);    
		        
		    //4.发送请求    
		    xmlHttpRequest.send(file);      
		}       
		    
		    
		//回调函数    
		function zswFun(){    
		    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){    
		      //     alert("ok");
		    }    
		} 
		
		
		//接下来是视频直播
		
		
		var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || 
		window.webkitRTCPeerConnection || window.msRTCPeerConnection;
	var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
		 window.webkitRTCSessionDescription || window.msRTCSessionDescription;
	
	var con = null;
	
	
	function createPeerConnection() {
	 	if(con != null){
			con = null;
		} 
			
		con =new peerConnection(null);
		
		con.onIceCandidate = function (event){
  			if(event.candidate){
  				//发送消息candidate:event.candidate候选人信息
  				console.log("send candidate");
  			}
  		};
  		
  		
  		/* con.onaddstream = function (event) {
  			attachMediaStream(reVideo, event.stream);
  		}; */
  		
  		con.addStream(lostream);
  		
  		
  		createOffer();
	}
	
	function createOffer() {
		console.log("create offer");
		con.createOffer(function(desc){
  			con.setLocalDescription(new sessionDescription(desc), function(){
  				//发送消息sdp:desc描述信息
  				console.log("send localDescription");
  				websocket.send(JSON.stringify({
  					'sdp': con.localDescription
  				}));
  			});
  		},function(){},{mandatory:{OfferToReceiveAudio:false,OfferToReceiveVideo:false}});
	}
	
	

		
	</script>
  </div>       
</div>
</div>